<template>
  <div>
  <div class="userInformation">
    <HeadCom />
    <div class="content-box">
      <p class="title">
        {{ titleInformation[active][0]
        }}<span class="subtitle"> {{ titleInformation[active][1] }}</span>
      </p>
      <p class="tip">{{ titleInformation[active][2] }}</p>
      <el-steps :active="active" finish-status="success" />

      <el-form
        ref="dataForm"
        :model="form"
        :rules="formRules"
        label-position="left"
        label-width="150px"
        status-icon
      >
        <div v-if="active == 1">
          <el-form-item prop="nickname">
            <span slot="label">
              <p class="formStar">姓名</p>
              <p class="formLabel">Name</p>
            </span>
            <el-input
              v-model.trim="form.nickname"
              placeholder="请填写真实姓名，用于投递简历"
              maxlength="20"
            />
          </el-form-item>
          <el-form-item prop="sex" class="radio">
            <span slot="label">
              <p class="formStar">性别</p>
              <p class="formLabel">Gender</p>
            </span>
            <el-radio-group v-model="form.sex" class="radio">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="clan">
            <span slot="label">
              <p class="formStar">民族</p>
              <p class="formLabel">National</p>
            </span>
            <el-select v-model="form.clan" placeholder="请选择民族">
              <el-option
                :label="item"
                :value="item"
                v-for="item in nationData"
                :key="item"
              >
                {{ item }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="identify">
            <span slot="label">
              <p class="formStar">当前身份</p>
              <p class="formLabel">Current Status</p>
            </span>
            <el-radio-group v-model="form.identify" class="radio">
              <el-radio
                v-for="item in studentType"
                :key="item.value"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="" prop="political">
            <span slot="label">
              <p class="formStar">政治面貌</p>
              <p class="formLabel">Political Landscape</p>
            </span>
            <el-select
              placeholder="请选择"
              v-model="form.political"
              style="width: 100%"
            >
              <el-option
                v-for="item in politicalList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="birthday">
            <span slot="label">
              <p class="formStar">出生日期</p>
              <p class="formLabel">Date of Birth</p>
            </span>
            <el-date-picker
              v-model="form.birthday"
              :picker-options="dateDiabledOption"
              type="date"
              placeholder="请选择出生年月日"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item prop="liveCity">
            <span slot="label">
              <p class="formStar">现居住城市</p>
              <p class="formLabel">Residence Address</p>
            </span>
            <el-cascader
              v-model="form.liveCity"
              style="width: 425px; margin-right: 15px"
              :options="provinceAndCityData"
              :show-all-levels="false"
              @change="handleChange"
              placeholder="请选择现居住城市"
            ></el-cascader>
          </el-form-item>
          <el-form-item prop="nativePlace">
            <span slot="label">
              <p class="formStar">籍贯</p>
              <p class="formLabel">Residency</p>
            </span>
            <el-cascader
              v-model="form.nativePlace"
              :options="provinceAndCityData"
              :show-all-levels="false"
              placeholder="请选择籍贯"
              @change="handleChange"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item prop="mobile">
            <span slot="label">
              <p class="formStar">手机号码</p>
              <p class="formLabel">Mobile Number</p>
            </span>
            <el-input
              disabled
              :maxlength="20"
              v-model.number="form.mobile"
              placeholder="手机号码"
            />
          </el-form-item>
          <el-form-item prop="email">
            <span slot="label">
              <p class="formStar">邮箱地址</p>
              <p class="formLabel">Email Address</p>
            </span>
            <el-input v-model.trim="form.email" placeholder="邮箱地址" />
          </el-form-item>
          <el-form-item prop="jobStatus" class="radio">
            <span slot="label">
              <p class="formStar">当前状态</p>
              <p class="formLabel">Current State</p>
            </span>
            <el-radio-group v-model="form.jobStatus" class="radio">
              <el-radio label="正在实习">正在实习</el-radio>
              <el-radio label="暂无实习">暂无实习</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="inJobTime" class="radio">
            <span slot="label">
              <p class="formStar">入职时间</p>
              <p class="formLabel">Entry Time</p>
            </span>
            <el-radio-group v-model="form.inJobTime" class="radio">
              <el-radio label="随时入职">随时入职</el-radio>
              <el-radio label="2周内入职">2周内入职</el-radio>
              <el-radio label="时间待定">时间待定</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div v-if="active == 2">
          <el-form-item prop="schoolName">
            <span slot="label">
              <p class="formStar">学校名称</p>
              <p class="formLabel">School</p>
            </span>
            <el-input
              v-model.trim="form.schoolName"
              placeholder="请填写学校名称"
              maxlength="20"
            />
          </el-form-item>
          <el-form-item prop="educationalBackground">
            <span slot="label">
              <p class="formStar">教育状态</p>
              <p class="formLabel">Highest Degree</p>
            </span>
            <el-select
              v-model="form.educationalBackground"
              placeholder="请选择教育状态"
              @change="onChange"
            >
              <el-option label="大专" value="大专"> </el-option>
              <el-option label="本科" value="本科"> </el-option>
              <el-option label="硕士" value="硕士"> </el-option>
              <el-option label="博士" value="博士"> </el-option>
            </el-select>
            <!-- 证书 0否 1是 -->
            <el-radio-group v-model="form.diploma" class="isCertificate">
              <el-radio class="degreeRadio" label="1">
                <span class="chinese">有学位证书</span>
                <span class="english">Graduate Certificate</span>
              </el-radio>
              <el-radio class="degreeRadio" label="0">
                <span class="chinese">无学位证书</span>
                <span class="english">No Graduate Certificate</span>
              </el-radio>
            </el-radio-group>
            <!-- 全日制 0否 1是 -->
            <el-radio-group v-model="form.fullTime" class="isCertificate">
              <el-radio class="degreeRadio" label="1">
                <span class="chinese">全日制</span>
                <span class="english">Full-Time</span>
              </el-radio>
              <el-radio class="degreeRadio" label="0">
                <span class="chinese">非全日制</span>
                <span class="english">Part-Time</span>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="major">
            <span slot="label">
              <p class="formStar">所学专业</p>
              <p class="formLabel">Name</p>
            </span>
            <el-input
              v-model.trim="form.major"
              placeholder="请填写所学专业"
              maxlength="20"
            />
          </el-form-item>
          <div style="display: flex">
            <span slot="label">
              <p class="formStar">在校时间</p>
              <p class="formLabel">Time Period</p>
            </span>
            <div class="flex-block">
              <el-form-item prop="intakeTime">
                <el-date-picker
                  v-model="form.intakeTime"
                  type="month"
                  :pickerOptions="startPickerOptions"
                  placeholder="开始日期"
                  format="yyyy年MM月"
                  valueFormat="yyyy年MM月"
                  style="width: 220px; height: 40px"
                >
                </el-date-picker>
              </el-form-item>
              <div class="line-grid">-</div>
              <div :class="isTillNow ? 'hiddens' : ''">
                <el-form-item prop="graduateTime">
                  <el-date-picker
                    v-model="form.graduateTime"
                    type="month"
                    :pickerOptions="endPickerOptions"
                    placeholder="毕业日期"
                    format="yyyy年MM月"
                    valueFormat="yyyy年MM月"
                    :disabled="isTillNow"
                    style="width: 220px; height: 40px"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
              <el-checkbox class="till-now" v-model="isTillNow"
                >至今<br />Till Now</el-checkbox
              >
            </div>
          </div>
          <div v-if="isTillNow">
            <el-form-item label="所在年级" required prop="grade">
              <span slot="label" class="left-label">
                <span calss="cn-label">所在年级</span><br />
                <span class="en-label">Grade</span>
              </span>
              <el-select v-model="form.grade" placeholder="请选择所在年级">
                <el-option
                  v-for="item in educationOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item
            label="是否有海外留学经历"
            required
            prop="isOverseasStudy"
          >
            <span slot="label" class="left-label">
              <span calss="cn-label">是否有海外留学经历</span><br />
              <span class="en-label">Studied Abroad</span>
            </span>
            <el-select
              v-model="form.isOverseasStudy"
              placeholder="请选择是否有海外留学经历"
            >
              <el-option label="无" value="无"> </el-option>
              <el-option label="有" value="有"> </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-if="active == 3">
          <el-form-item label="期望职位" required prop="jobName">
            <span slot="label">
              <p class="formStar">期望职位</p>
              <p class="formLabel">Position Applied</p>
            </span>
            <el-input
              v-model.trim="form.jobName"
              placeholder="请输入期望职位,如：销售经理"
              maxlength="20"
            />
          </el-form-item>
          <el-form-item prop="expectedIndustry">
            <span slot="label">
              <p class="formStar">期望行业</p>
              <p class="formLabel">Industry Preferences</p>
            </span>
            <el-cascader
              v-model="form.expectedIndustry[0]"
              :options="businessAreaData"
              :show-all-levels="false"
              placeholder="请选择期望职位，如：互联网/电子商务"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item prop="targetCity">
            <span slot="label">
              <p class="formStar">期望城市</p>
              <p class="formLabel">Target City</p>
            </span>
            <el-cascader
              v-model="form.targetCity"
              :options="provinceAndCityData"
              placeholder="请选择期望城市"
            />
          </el-form-item>
          <el-form-item class="targetSalary">
            <span slot="label">
              <p class="formStar">薪资要求</p>
              <p class="formLabel">Target Salary</p>
            </span>
            <el-form-item prop="lowestSalary">
              <el-input
                v-model.number="form.lowestSalary"
                placeholder="元/天"
                type="number"
                @change="handleMinChange"
                maxlength="4"
                oninput="if(value.length>4)value=value.slice(0,4)"
              />
            </el-form-item>
            <span class="span">~</span>
            <el-form-item prop="highestSalary">
              <el-input
                v-model.number="form.highestSalary"
                placeholder="元/天"
                type="number"
                maxlength="4"
                oninput="if(value.length>4)value=value.slice(0,4)"
                @change="handleMaxChange"
              />
            </el-form-item>
            <div class="right-label">
              <span class="cn">元/天</span><br />
              <span class="en">Yuan per day</span>
            </div>
          </el-form-item>
        </div>
      </el-form>
      <div class="step">
        <el-button v-if="active > 1" class="up" @click="pre">上一步</el-button>
        <el-button v-if="active < 3" class="next" @click="next()"
          >下一步</el-button
        >
        <el-button v-if="active === 3" class="next" @click="finish()"
          >完成</el-button
        >
      </div>
    </div>
    <div class="footerBox"><Footer /></div>
  </div>
  <MobliePage
    :titleInformation="titleInformation"
    :form="form"
    :studentType="studentType"
    :provinceAndCityData="provinceAndCityData"
    :nationData="nationData"
    :politicalList="politicalList"
    :educationalBackList="educationalBackList"
    :isTillNow="isTillNow"
    :educationOptions="educationOptions"
    :businessAreaData="businessAreaData"
    @finish="finishMobile"
  />
  </div>
</template>

<script>
import {
  upUserInfo,
  getUerInfo,
  createStudentCurriculumVitae,
  getStudentCurriculumVitaeBylogin,
} from "../../request/api";
import { getAge } from "@/utils/utils";
import {
  AreaOption,
  provinceAndCityData,
  getProvinceAndCityDataLabel,
  getProvinceAndCityDataValue,
  studentType,
  nationData,
  politicalList,
  educationOptions,
} from "../../utils/frontDataDict";
import HeadCom from "./components/head.vue";
import Footer from "@/components/footer/index.vue";
import SelectCom from "../userCenter/components/selectCom.vue";
import { mapMutations } from "vuex";
import moment from "moment";
import MobliePage from './mobile/index.vue';
const MIN_NUMBER = 1;
const MAX_NUMBER = 100000;
export default {
  name: "userInformation",
  components: {
    HeadCom,
    Footer,
    SelectCom,
    MobliePage,
  },
  data() {
    let expectedIndustryValidator = (rule, value, callback) => {
      if (value[0] == "") {
        callback(new Error("请选择期望行业"));
      } else {
        callback();
      }
    };
    let validataEmail = (rule, value, callback) => {
      let emailReg =
        /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
      if (value === "") {
        return callback(new Error("邮箱不可为空"));
      } else {
        if (emailReg.test(value)) {
          return callback();
        } else {
          return callback(new Error("格式有误"));
        }
      }
    };
    return {
      startPickerOptions: {
        disabledDate: (time) => {
          let { graduateTime } = this.form;
          if (graduateTime !== "" && graduateTime !== "至今") {
            // let now = this.educationalExperience.graduateTime === '至今' ? moment() : moment(this.educationalExperience.graduateTime)
            return time.getTime() > this.fetchDateFun(graduateTime, true);
          } else {
            return time.getTime() > Date.now();
          }
        },
      },
      endPickerOptions: {
        disabledDate: (time) => {
          let { intakeTime } = this.form;
          if (intakeTime !== "") {
            return time.getTime() < this.fetchDateFun(intakeTime);
          } else {
            // return time.getTime() < Date.now()
          }
        },
      },
      isTillNow: false,
      politicalList: politicalList,
      nationData: nationData,
      studentType: studentType,
      provinceAndCityData: provinceAndCityData,
      businessAreaData: AreaOption,
      dateDiabledOption: {
        disabledDate: (time) => {
          let nowDate = new Date();
          return time.getTime() > nowDate.getTime();
        },
      },
      active: 1,
      educationOptions: [],
      form: {
        nickname: "", // 姓名
        sex: "男", // 性别
        birthday: '', // 出生日期
        clan: "", // 民族
        liveCity: "", // 居住城市
        mobile: "", // 手机号
        email: "", // 邮箱地址
        jobStatus: "正在实习", //求职状态,
        inJobTime: "随时入职", //入职时间,
        nativePlace: "", // 籍贯， xx省xx市
        identify: "0", // 当前身份，'0' 在校生、'1' 应届生
        political: "", // 政治面貌
        // 教育经历
        schoolName: "", // 学校名称
        educationalBackground: "", //教育状态
        grade: "", //所在年级   选择至今才会展示
        isOverseasStudy: "无", //是否有海外留学经历
        fullTime: "1", //全日制 0否 1是
        diploma: "1", //证书 0否 1是
        major: "", //专业
        graduateTime: "", //在校时间

        intakeTime: "", //入学时间
        universityEndDate: "",
        //实习意向
        jobName: "", // 期望职位
        expectedIndustry: ["", "", ""], //期望行业
        targetCity: "", //工作城市
        lowestSalary: "", //最低薪资
        highestSalary: "", //最高薪资
        age: "",
      },
      formRules: {
        expectedIndustry: [
          { validator: expectedIndustryValidator, trigger: "change" },
        ],
        email: [{ required: true, validator: validataEmail, trigger: "blur" }],
        nickname: [
          {
            required: true,
            message: "姓名不能为空",
          },
        ],
        political: [
          {
            required: true,
            message: "政治面貌不能为空",
            trigger: "change",
          },
        ],
        schoolName: [
          {
            required: true,
            message: "学校名称不能为空",
            trigger: "blur",
          },
        ],
        clan: [
          {
            required: true,
            message: "民族不能为空",
            trigger: "change",
          },
        ],
        jobName: [
          {
            required: true,
            message: "期望职位不能为空",
            trigger: "blur",
          },
        ],
        liveCity: [
          {
            required: true,
            message: "现居城市不能为空",
            trigger: "change",
          },
        ],
        nativePlace: [
          {
            required: true,
            message: "籍贯不能为空",
            trigger: "change",
          },
        ],
        educationalBackground: [
          {
            required: true,
            message: "教育状态不能为空",
            trigger: "change",
          },
        ],
        fullTime: [
          {
            required: true,
            message: "请选择是否为全日制",
            trigger: "change",
          },
        ],
        diploma: [
          {
            required: true,
            message: "请选择是否有学位证书",
            trigger: "change",
          },
        ],
        birthday: [
          {
            required: true,
            message: "出生日期必填",
            trigger: "change",
          },
        ],
        major: [
          {
            required: true,
            message: "专业不能为空",
          },
        ],
        intakeTime: [
          {
            required: true,
            message: "请选择在校时间",
            trigger: "change",
          },
        ],
        graduateTime: [
          { required: true, message: "请选择毕业日期", trigger: "change" },
        ],
        lowestSalary: [
          { required: true, message: "必填项", trigger: "blur" },
          { validator: this.validateCom, trigger: "blur" },
          { validator: this.validateMin, trigger: "blur" },
        ],
        highestSalary: [
          { required: true, message: "必填项", trigger: "blur" },
          { validator: this.validateCom, trigger: "blur" },
          { validator: this.validateMax, trigger: "blur" },
        ],
        targetCity: [
          { required: true, message: "请选择工作城市", trigger: "change" },
        ],
      },
      titleInformation: {
        1: [
          "个人信息",
          "Personal Information",
          "请填写真实信息，招聘者通过这些条件搜索到你哦～",
        ],
        2: [
          "教育经历",
          "Educaiton",
          "请填写国家承认学历的教育经历，非培训经历",
        ],
        3: ["求职意向", "Job Preferences", "请填写求职意向"],
      },
      // 用户信息
      userInfo: null,
      educationalBackList: [
        '大专',
        '本科',
        '硕士',
        '博士',
      ]
    };
  },
  created() {
    let userMobile = localStorage.getItem("userMobile");
    if (userMobile) {
      this.form.mobile = userMobile;
      // 调用用户信息接口，主要为了获取用户id，更新个人信息、简历
      this.getUserInfo();
    } else {
      this.loginOut();
      this.$message.warning("用户信息不存在，请重新登录");
      this.$router.replace({ name: "login" });
    }
  },
  methods: {
    ...mapMutations(["loginOut"]),
    fetchDateFun(timeStr, type) {
      timeStr = timeStr.replace("年", "-");
      timeStr = timeStr.replace("月", "");
      let newTime = type
        ? new Date(timeStr) * 1 - 2592000000
        : new Date(timeStr) * 1 + 2592000000;
      return newTime;
    },
    getEducationOptions(id) {
      let val = "";
      educationOptions.forEach((e) => {
        if (!e.children) return;
        let list = e.children.filter((v) => v.value == id);
        list.length > 0 && (val = list[0].label);
      });
      return val;
    },

    getEducationOptionsId(value) {
      let id = "";
      educationOptions.forEach((e) => {
        if (!e.children) return;
        let list = e.children.filter((v) => v.label == value);
        list.length > 0 && (value = list[0].label);
      });
      return id;
    },
    getUserInfo() {
      this.educationOptions = educationOptions[1].children;
      this.form.mobile &&
        getUerInfo({ mobile: this.form.mobile }).then((res) => {
          if (res.code === 0 && res.data) {
            this.userInfo = res.data;
            this.userInfo.birthday = this.userInfo.birthday
              ? moment(this.userInfo.birthday).format("yyyy-MM-DD")
              : "";
            this.userInfo.liveCity = getProvinceAndCityDataValue(
              this.userInfo.liveCity
            );
            this.userInfo.nativePlace = getProvinceAndCityDataValue(
              this.userInfo.nativePlace
            );
          }
        });
    },
    changeJobStatus(e) {
      this.form.jobStatus = e;
    },
    changeInJobTime(e) {
      this.form.inJobTime = e;
    },
    onChange(e) {
      this.form.grade = null;
    },
    finish() {
      this.$refs.dataForm.validate((boo) => {
        if (boo) {
          let params = JSON.parse(JSON.stringify(this.form));
          params.liveCity = getProvinceAndCityDataLabel(params.liveCity);
          params.nativePlace = getProvinceAndCityDataLabel(
            params.nativePlace,
            2
          );
          params.id = this.userInfo.id;
          params.studentName = params.nickname;
          try {
            params.age = getAge(params.birthday);
          } catch (error) {
            params.age = "";
          }
          // 期望工作城市
          params.targetCity = getProvinceAndCityDataLabel(params.targetCity);
          // 期望行业
          params.expectedIndustry[0] = params.expectedIndustry[0][1];
          let {
            nickname,
            schoolName,
            nativePlace,
            mobile,
            sex,
            birthday,
            political,
            liveCity,
            graduateTime,
            clan,
            identify,
            intakeTime,
            email,
            id,
            jobName,
            jobStatus,
            inJobTime,
            targetCity,
            lowestSalary,
            highestSalary,
            expectedIndustry,
            educationalBackground,
            grade, //所在年级   选择至今才会展示
            isOverseasStudy, //是否有海外留学经历
            fullTime,
            diploma,
            major,
          } = params;
          // 求职意愿，只支持填写一个
          let internshipDesire = [
            {
              jobName, // 期望职位
              expectedIndustry, //期望行业
              targetCity, //工作城市
              lowestSalary, //最低薪资
              highestSalary, //最高薪资
            },
          ];
          // 教育经历
          let educationalExperience = [
            {
              schoolName, // 学校名称
              educationalBackground, //教育状态
              fullTime, //全日制 0否 1是
              diploma, //证书 0否 1是
              major, //专业
              graduateTime, //毕业时间
              intakeTime, //入学时间
              grade, //所在年级   选择至今才会展示
              isOverseasStudy, //是否有海外留学经历
            },
          ];
          if (this.isTillNow) {
            educationalExperience.graduateTime = "至今";
            educationalExperience.grade = this.getEducationOptionsId(grade);
          }

          // 创建简历提交数据
          let resumeParams = {
            studentPictureUrl:
              "https://demo-oss.oss-cn-beijing.aliyuncs.com/png/860518f0dcfb42c38f0abd2dbdaeba41.png",
            birthday,
            jobStatus,
            inJobTime,
            id,
            clan,
            email,
            liveCity,
            nickname,
            nativePlace,
            status: "0", // 学生认证状态 studentAuthStatus 0 默认状态， 1 认证通过， 2 认证驳回
            sex,
            graduateTime: "", // 个人信息页面，毕业时间字段暂时废弃，仍保留
            mobile,
            studentId: id,
            studentName: nickname,
            phoneNumber: mobile,
            identify,
            publicStatus: "0", // 简历公开状态，强制公开
            political, // 政治面貌
            internshipDesire: JSON.stringify(internshipDesire), // 求职意向
            educationalExperience: educationalExperience, //教育经历
          };
          // 更新学生个人信息
          upUserInfo(resumeParams).then((res) => {
            if (res.code === 0 && res.data) {
              // 创建简历
              resumeParams.name = "模板1";
              createStudentCurriculumVitae(resumeParams).then((res) => {
                if (res.code === 0 && res.data) {
                  // 获取用户信息，更新本地缓存id
                  getStudentCurriculumVitaeBylogin().then((res) => {
                    if (res.code === 0 && res.data) {
                      this.$store.commit("setCurriculumId", res.data[0].id);
                      this.$message({
                        message: "保存简历成功",
                        type: "success",
                      });
                      this.$message({
                        message: "个人信息提交成功",
                        type: "success",
                      });
                      this.$router.replace({ name: "home" });
                    }
                  });
                } else {
                  this.$message.error(res.msg);
                }
              });
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    finishMobile({isTillNowMobile}) {
      this.isTillNow = isTillNowMobile
      this.finish()
    },
    handleChange(e) {
      console.log(getProvinceAndCityDataLabel(e), e);
    },
    // 步骤条下一步的方法
    next() {
      this.$refs.dataForm.validate((boo) => {
        if (boo) {
          this.active += 1;
          setTimeout(() => {
            this.$refs.dataForm.clearValidate();
          });
        }
      });
    },
    // 步骤条上一步的方法
    pre() {
      if (this.active-- < 2) this.active = 1;
    },
    handleMinChange() {
      this.$refs.dataForm.validateField("highestSalary");
    },
    handleMaxChange() {
      this.$refs.dataForm.validateField("lowestSalary");
    },
    validateCom(rule, value, callback) {
      const one = Number(value);
      if (Number.isInteger(one)) {
        if (one < MIN_NUMBER) {
          return callback(new Error("输入值必须大于0"));
        } else if (one > MAX_NUMBER) {
          return callback(new Error("输入值必须小于100000"));
        }
        return callback();
      }
      return callback(new Error("输入值必须为正整数"));
    },
    validateMin(rule, value, callback) {
      const one = Number(value);
      const highestSalary = Number(this.form.highestSalary);
      if (!highestSalary || one < highestSalary) {
        return callback();
      }
      return callback(new Error("输入值不得大于最大阈值"));
    },
    validateMax(rule, value, callback) {
      const one = Number(value);
      const lowestSalary = Number(this.form.lowestSalary);
      if (!lowestSalary || one > lowestSalary) {
        return callback();
      }
      return callback(new Error("输入值不得小于最小阈值"));
    },
  },
  watch: {
    isTillNow(newValue) {
      // newValue && this.$set(this.form, "graduateTime", "");
      if (newValue) {
        let { graduateTime, newRules } = this.formRules;
        this.$set(this.form, "graduateTime", "");
        this.formRules = {
          ...newRules,
          grade: [
            { required: true, message: "请选择所在年级", trigger: "change" },
          ],
        };
      } else {
        let { grade, newRules } = this.formRules;
        this.formRules = {
          ...newRules,
          graduateTime: [
            { required: true, message: "请选择毕业日期", trigger: "change" },
          ],
        };
      }
    },
    "form.educationalBackground": function (newValue) {
      this.educationOptions =
        educationOptions[
          ["", "大专", "本科", "硕士", "博士"].findIndex(
            (e) => e == newValue
          ) || 1
        ].children;
    },
  },
};
</script>

<style lang='less' scoped>
@media screen and (max-width: 750px) {
  #app {
    min-width: auto;
  }
  .userInformation {
    display: none !important;
  }
  .mobile-userinfo-page {
    display: block !important;
    .step-box {
      display: flex !important;
    }
  }
}
</style>
<style scoped lang="less">
@import "./components/userInformation.less";
.till-now {
  vertical-align: middle;
  line-height: 40px;
  height: 40px;
  /deep/ .el-checkbox__input {
    vertical-align: middle;
    line-height: 40px;
    top: -17px;
  }
  /deep/ .el-checkbox__inner {
    transform: scale(2);
    margin: 0 10px 0 20px;
    vertical-align: middle;
  }
  /deep/ .el-checkbox__label {
    line-height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9597a0;
  }
}
/deep/ .right-label {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 40px;
  overflow: hidden;
  vertical-align: middle;
  .cn {
    display: inline-block;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #969696;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 10px;
  }
  .en {
    display: inline-block;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9597a0;
    line-height: 20px;
    position: absolute;
    bottom: 0;
    left: 10px;
  }
}
.line-grid {
  width: 94px;
  height: 40px;
  line-height: 40px;
  font-size: 23px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #37383d;
  text-align: center;
}
.flex-block {
  display: flex;
  flex-flow: row nowrap;
  margin-left: 100px;
  /deep/.el-form-item__content {
    margin-left: 0 !important;
  }
  .hiddens {
    /deep/.el-form-item__error {
      display: none;
    }
    /deep/.el-form-item.is-error {
      .el-input__validateIcon {
        display: none;
      }
    }
  }
}
/deep/ .el-form-item__label {
  line-height: 23px;
}
</style>
